<template>
  <div>
    <div id="gogo">
      <div>
        <div id="op">
          <van-icon name="points" size="1em" color="white" style="margin-top: 1vh" />
          <div>{{ thisCount.cont }}</div>
        </div>
        <div>
          <van-search
            v-model="all.value"
            shape="round"
            placeholder="请输入商品关键词"
            background="-webkit-linear-gradient(top,#FFC456,#FF9B36)"
            @blur="handleInput"
          />
        </div>
      </div>
    </div>

    <div style="margin: 0.85rem 5vw">
      <van-swipe :autoplay="3000" lazy-render height="150" loop style="border-radius: 15px">
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image" style="width: 100%; height: 100%" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <van-tabs v-model:active="all.active" swipeable shrink @change="handleChange">
      <van-tab :title="item.name" v-for="(item, index) in all.tabs" :key="index" />
    </van-tabs>

    <lazy-component>
      <div class="list">
        <div
          class="item"
          v-for="(item, index) in all.renderList"
          :key="item.id"
          @click="handleClick(item, index)"
        >
          <van-image :src="item.image" height="43vw" v-lazy />
          <div class="title">{{ item.title }}</div>

          <div class="between">
            <div class="integral">{{ item.integral }}积分</div>
            <van-button type="primary" class="btn">兑换</van-button>
          </div>
        </div>
      </div>
    </lazy-component>
  </div>
</template>

<script setup>
import { useIntegrallist } from '@/stores/integralList.js'  // 导入名为useIntegrallist的函数，从'@/stores/integralList.js'文件中
import { useUserInfoStore } from '@/stores/user.js'  // 导入名为useUserInfoStore的函数，从'@/stores/user.js'文件中
import { storeToRefs } from 'pinia'  // 导入storeToRefs函数，从'pinia'库中
import { reactive, ref } from 'vue'  // 导入reactive和ref函数，从'vue'库中
import { useRouter } from 'vue-router'  // 导入useRouter函数，从'vue-router'库中
import { baseURL, integralIndex } from '../../api'  // 导入baseURL和integralIndex函数，从'../../api'文件中

const userInfoStore = useUserInfoStore()  // 使用useUserInfoStore函数创建userInfoStore对象
const { thisCount } = storeToRefs(userInfoStore)  // 使用storeToRefs函数将userInfoStore对象的thisCount属性解构为响应式对象
const integrallist = useIntegrallist()  // 使用useIntegrallist函数创建integrallist对象

const router = useRouter()  // 使用useRouter函数创建router对象

function handleClick(item) {  // 定义一个名为handleClick的函数，接受参数item
  integrallist.getCur(item)  // 调用integrallist对象的getCur方法，传入item
  router.push('/goodsDetail')  // 跳转到'/goodsDetail'路径
}

function handleChange(active) {  // 定义一个名为handleChange的函数，接受参数active
  if (active === 0) {
    all.renderList = all.list
    return
  }
  all.renderList = all.list.filter((item) => item.class_id === active)
}

function handleInput() {  // 定义一个名为handleInput的函数
  if (all.value) {
    all.renderList = all.list.filter((item) => item.title.includes(all.value))
  } else {
    all.renderList = all.list
  }
}

const all = reactive({  // 创建一个响应式对象all
  value: ``,
  active: null,
  loading: true,
  tabs: [{ name: `所有商品` }],
  list: [],
  renderList: []
})

;(async function () {  // 定义一个异步函数并立即调用
  try {
    all.loading = true  // 将all的loading属性设为true
    const {
      data: { date, list }
    } = await integralIndex()  // 调用integralIndex函数，并将返回结果解构为date和list
    all.tabs = [...all.tabs, ...list]  // 将list中的项添加到all的tabs属性中
    all.list = date.map((item) => {  // 将date映射为一个新数组
      item.image = baseURL + item.image  // 将item的image属性拼接baseURL，赋值给item.image
      return item  // 返回item
    })
    all.renderList = all.list  // 将all的list属性赋值给renderList属性
    all.loading = false  // 将all的loading属性设为false
  } catch (error) {
    all.loading = false  // 将all的loading属性设为false
  }
})()

const images = ref([  // 创建一个ref对象images，初始值为包含两个图片链接的数组
  'https://ts1.cn.mm.bing.net/th/id/R-C.0ec105c3125696588ccd02c8b65726e2?rik=eiX3eQDZb2M1aw&riu=http%3a%2f%2fp16.qhimg.com%2fbdr%2f__85%2fd%2f_open360%2ffengjing34%2fABC8cbd.jpg&ehk=Jx%2bKZUEcXzD422Ze56OEePMnbHry3BugHfeBxfWOi%2fQ%3d&risl=&pid=ImgRaw&r=0',
  'https://ts1.cn.mm.bing.net/th/id/R-C.f36656fe02a645a3d5524006bb573b1d?rik=gRMGRTpK51Mz1g&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545127.jpg&ehk=USKU3oPkKugGChkWgHVVwVTA71oYILzZdpJfC1Vl87A%3d&risl=&pid=ImgRaw&r=0'
])

</script>

<style lang="less">
#op {
  display: flex;
  align-items: center;
  > div {
    color: white;
    font-size: 1.6em;
    font-weight: bolder;
    font-family: 微软雅黑;
  }
}
#gogo {
  // height: 10vh;
  background: -webkit-linear-gradient(top, #ffc456, #ff9b36);
  > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0% 3vw;
    > div:last-child {
      width: 67vw;
    }
  }
}
.list {
  padding: 15px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 15px;
  row-gap: 1rem;
  .item {
    display: grid;
    flex-direction: column;
    row-gap: 0.7rem;
    border: rgba(225, 225, 225) solid 1px;
    padding-bottom: 10px;
    .title {
      padding: 0 10px;
      font-size: 15px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      overflow: hidden;
      /*! autoprefixer: off */
      -webkit-box-orient: vertical;
    }
    .between {
      padding: 0 10px;

      display: flex;
      align-items: center;
      justify-content: space-between;
      .integral {
        color: red;
        font-size: 15px;
        font-weight: bold;
      }
      .btn {
        border-radius: 12px;
        height: 2em;
      }
    }
  }
}
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
